<template>
  <div class="">
    <!-- app-container -->
    <div class="head">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="商品名称：" prop="">
          <el-input v-model="queryParams.name" placeholder="请输入商品名称" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="商品类型：" prop="">
          <el-select v-model="queryParams.type" placeholder="请选择" clearable style="width: 240px">
            <el-option v-for="dict in commodityType" :key="dict.id" :label="dict.value" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态：" prop="">
          <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 240px">
            <el-option v-for="dict in statusType" :key="dict.id" :label="dict.value" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="支付类型：" prop="">
          <el-select v-model="queryParams.payType" placeholder="请选择" clearable style="width: 240px">
            <el-option v-for="dict in payTypeList" :key="dict.id" :label="dict.value" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <div class="listBox_head">
        <el-button type="primary" style="margin: 10px 0 20px" @click="addClick">新增</el-button>
      </div>
      <el-table v-loading="loading" :data="tabList" stripe border>
        <el-table-column label="序号" align="center" type="index" width="64px" />
        <el-table-column label="商品编号" align="center" prop="commodityNo" :show-overflow-tooltip="true" />
        <el-table-column label="排序号" align="center" prop="sort" :show-overflow-tooltip="true" />
        <el-table-column label="商品类型" align="center" prop="type" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <dict-tag :options="commodityType" :value="scope.row.type" />
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center" prop="name" :show-overflow-tooltip="true" />
        <el-table-column label="商品图片" align="center" prop="type" width="140">
          <template slot-scope="scope">
            <!-- <img class="img_box" :src="scope.row.img" alt="" v-if="scope.row.img"> -->
            <el-image style="width: 100px;" :src="scope.row.img" fit="fill"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="支付类型" align="center" prop="payTypeDict" :show-overflow-tooltip="true" />
        <el-table-column label="现金（￥）" align="center" prop="cash" width="140" />
        <el-table-column label="积分" align="center" prop="type" width="140">
          <template slot-scope="scope">
            <span>{{scope.row.price}}{{scope.row.priceTypeDict}}</span>
          </template>
        </el-table-column>
        <el-table-column label="总库存" align="center" prop="stock" :show-overflow-tooltip="true" />
        <el-table-column label="销量" align="center" prop="sales" :show-overflow-tooltip="true" />
        <el-table-column label="剩余库存" align="center" prop="surplusStock" :show-overflow-tooltip="true" />
        <el-table-column label="虚拟库存" align="center" prop="virtualStock" :show-overflow-tooltip="true" />
        <el-table-column label="状态" align="center" prop="" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <dict-tag :options="statusType" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="220" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="updateIssueStatus(scope.row,1)" v-if="scope.row.status==2">上架
            </el-button>
            <el-button size="mini" type="text" @click="updateIssueStatus(scope.row,2)" v-if="scope.row.status==1">下架
            </el-button>
            <el-button size="mini" type="text" @click="editClick(scope.row)" :disabled="scope.row.status==3?true:false">编辑</el-button>
            <el-button size="mini" type="text" @click="deactivate(scope.row)" :disabled="scope.row.status==3?true:false">停用</el-button>
            <el-button size="mini" type="text" @click="addStock(scope.row)" :disabled="scope.row.status==3?true:false">添加库存</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList"></pagination>
    </div>
    <Dialog :id="dialogId" v-bind="$attrs" v-if="dialogVisible" :visible.sync="dialogVisible" @success="_handleSuccess">
    </Dialog>
  </div>
</template>

<script>
  import {
    integralCommodityLs,
    integralChangeStatus,
    integralAddStock,
    integralDeactivate,
  } from "@/api/integralOperation";
  import Dialog from "@/views/integralOperation/commodityConfiguration/dialog";
  export default {
    name: "",
    components: {
      Dialog
    },
    data() {
      return {
        dialogId: '',
        dialogVisible: false,
        // 遮罩层
        loading: false,
        // 导出遮罩层
        // 总条数
        total: 0,
        commodityType: [], //商品类型字典数组
        statusType: [], //状态字典数组
        payTypeList: [],//支付类型
        //表格数据
        tabList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: '', //商品名称
          status: '', //状态
          type: '', //商品类型
          payType: '',//支付类型
        }
      };
    },
    created() {
      this.getDict();
      this.getCardDict();
      this.getList();
    },
    methods: {
      //获取状态字典
      getDict() {
        var dictType = "bee_integral_commodity_status,bee_integral_commodity_pay_type";
        this.$getSelectList(dictType)
          .then((res) => {
            this.statusType = res.result[0].dictList;
            this.payTypeList = res.result[1].dictList;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      //获取商品类型字典
      getCardDict() {
        var dictType = "bee_integral_commodity_type";
        this.$getSelectList(dictType)
          .then((res) => {
            this.commodityType = res.result[0].dictList;
          })
          .finally(() => {

          });
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        integralCommodityLs(this.queryParams).then(response => {
          this.tabList = response.result.records;
          this.total = response.result.total;
          console.log(this.total)
          this.loading = false;
        });
      },
      // 表单重置
      reset() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          name: '', //商品名称
          status: '', //状态
          type: '', //商品类型
          payType: '',//支付类型
        };
        // this.resetForm("form");
        this.handleQuery()
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm("queryForm");
        this.reset();
        this.handleQuery();
      },
      /** 上下架按钮操作 */
      updateIssueStatus(row, status) {
        let title = ''
        if (status == 1) { //上架
          title = '确定上架' + ' ' + row.name + ' ' + '的兑换？'
        } else {
          title = '确定下架' + ' ' + row.name + ' ' + '的兑换？'
        }
        this.$confirm('是否' + title, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          integralChangeStatus(row.id).then(response => {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.getList();
          });

        }).catch(() => {});
      },
      addStock(row) { //添加库存
        this.$prompt('添加库存数量', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^(?:0|\-?[1-9]\d*)$/, //只能输入整数（含负数）
          inputErrorMessage: "请正确填写添加库存数量",
        }).then(({
          value
        }) => {
          let data = {
            addStock: value,
            id: row.id
          }
          integralAddStock(data).then(response => {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.getList();
          });
        }).catch(() => {});
      },
      //新增
      addClick() {
        this.dialogId = null
        this.dialogVisible = true;
      },
      // 编辑
      editClick(row) {
        this.dialogId = row.id
        this.dialogVisible = true;
      },
      //停用
      deactivate(row) {
        this.$confirm('是否停用?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          integralDeactivate(row.id).then(response => {
            this.$message({
              type: 'success',
              message: '停用成功!'
            });
            this.getList();
          });
        }).catch(() => {});
      },
      _handleSuccess(e) {
        //成功回调
        // this.resetQuery()
        this.getList()
      },
    }
  };

</script>
<style scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
  }

  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
  }

  .listBox_head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .img_box {
    width: 100px;
    height: 80px;
    border-radius: 4px;
  }

</style>
